<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>静态表格 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 32px;
      }
    </style>
  </head>
  <body>
    <div class="layui-btn-container">
      <a href="table.html" class="layui-btn">表格综合</a>
      <a href="table-test.html" class="layui-btn">表格操作</a>
      <a
        href="table-static.html"
        class="layui-btn layui-btn-primary layui-border-green"
        >静态表格</a
      >
    </div>

    <table class="layui-table">
      <colgroup>
        <col width="150" />
        <col width="150" />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>人物</th>
          <th>民族</th>
          <th>格言</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>孔子</td>
          <td>华夏</td>
          <td>有朋至远方来，不亦乐乎</td>
        </tr>
        <tr>
          <td>孟子</td>
          <td>华夏</td>
          <td>穷则独善其身，达则兼济天下</td>
        </tr>
      </tbody>
    </table>

    <br />

    <table class="layui-table" lay-size="sm">
      <colgroup>
        <col width="150" />
        <col width="150" />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>人物</th>
          <th>民族</th>
          <th>格言</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>孔子</td>
          <td>华夏</td>
          <td>有朋至远方来，不亦乐乎</td>
        </tr>
        <tr>
          <td>孟子</td>
          <td>华夏</td>
          <td>穷则独善其身，达则兼济天下</td>
        </tr>
      </tbody>
    </table>

    <br />

    <table class="layui-table" lay-size="lg">
      <colgroup>
        <col width="150" />
        <col width="150" />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>人物</th>
          <th>民族</th>
          <th>格言</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>孔子</td>
          <td>华夏</td>
          <td>有朋至远方来，不亦乐乎</td>
        </tr>
        <tr>
          <td>孟子</td>
          <td>华夏</td>
          <td>穷则独善其身，达则兼济天下</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
